import * as bootstrap from 'bootstrap';
import { TemplateManager } from '/src/util/templatemanager/templatemanager.js';

/**
 * 通用打开模态框函数
 * @param {Object} options - 配置选项
 * @param {string} options.url - 要加载到模态框中的 HTML 文件路径
 * @param {string} [options.size=''] - 模态框大小类，例如 'modal-lg', 'modal-xl'
 * @param {string} [options.title=''] - 模态框标题
 * @param {Function} [options.callback] - 模态框关闭后的回调函数，接收模态框传递回来的数据
 */
export async function openModal(options = {}) {
    const { url, size = '', title = '', callback } = options;

    const modalEl = document.getElementById('dynamicModal');
    const modalDialog = modalEl.querySelector('.modal-dialog');

    // 重置模态框大小类
    modalDialog.className = 'modal-dialog';
    if (size) {
        modalDialog.classList.add(size);
    }

    // 设置标题（如果模态框HTML中有 .modal-title 元素）
    const titleEl = modalEl.querySelector('.modal-title');
    if (titleEl) {
        titleEl.textContent = title;
    }

    // 移除之前可能添加的事件监听器，避免重复执行
    modalEl.removeEventListener('shown.bs.modal', onModalShown);
    modalEl.removeEventListener('hidden.bs.modal', onModalHidden);

    const bsModal = new bootstrap.Modal(modalEl);

    // 定义模态框显示后的处理逻辑
    async function onModalShown() {
        try {
            let html = await TemplateManager.loadTemplate(url);
            const content = modalEl.querySelector('.modal-content');
            content.innerHTML = html;

            // 将回调函数暴露给模态框内部脚本使用
            // 约定：模态框内部脚本在完成操作后，调用 window.modalCallback(data) 并传回数据
            window.modalCallback = function (data) {
                if (typeof callback === 'function') {
                    callback(data); // 执行外部传入的回调
                }
                bsModal.hide(); // 关闭模态框
            };

            // 如果模态框有独立的 JS 文件，尝试动态导入并初始化
            // 约定：JS文件路径与HTML文件同名，后缀为 .js
            const jsUrl = url.replace(/\.html$/i, '.js');
            try {
                const jsModule = await import(jsUrl);
                jsModule.init();
            } catch (jsError) {
                // 如果没有对应的 JS 文件或导入失败，不报错，继续执行
                console.log(`模态框 ${url} 没有找到或初始化失败对应的 JS 文件 (${jsUrl}):`, jsError);
            }

            // 为模态框内的关闭按钮绑定事件
            const closeBtns = content.querySelectorAll('[data-bs-dismiss="modal"]');
            closeBtns.forEach(btn => {
                btn.addEventListener('click', () => bsModal.hide());
            });

        } catch (err) {
            console.error('加载或初始化模态框失败:', err);
            modalEl.querySelector('.modal-content').innerHTML = `
                <div class="modal-body text-danger text-center">
                <p>加载失败：${err.message}</p>
                <button class="btn btn-sm btn-secondary" data-bs-dismiss="modal">关闭</button>
                </div>`;
        }
    }

    // 定义模态框隐藏后的清理逻辑
    function onModalHidden() {
        // 清理回调函数，避免内存泄漏或意外调用
        window.modalCallback = null;
        // 清空模态框内容
        modalEl.querySelector('.modal-content').innerHTML = `
            <div class="modal-body">
                <div class="text-center">
                    <div class="spinner-border text-primary" role="status">
                        <span class="visually-hidden">加载中...</span>
                    </div>
                </div>
            </div>`;
    }

    // 绑定事件监听器
    modalEl.addEventListener('shown.bs.modal', onModalShown);
    modalEl.addEventListener('hidden.bs.modal', onModalHidden);

    // 显示模态框
    bsModal.show();
}

export function openTableModal(callback) {
    openModal({
        url: '/src/components/modal/table/table.html',
        size: 'modal-xl',
        title: '自定义查询',
        callback: callback
    });
}

export function openSearchBarModal(callback) {
    openModal({
        url: '/src/components/modal/search/searchBar.html',
        size: '',
        title: '添加查询框',
        callback: callback
    });
}